<!--
 * @Author: your name
 * @Date: 2023-10-03 19:39:17
 * @LastEditTime: 2023-10-03 20:12:14
 * @LastEditors: DESKTOP-536UVPC
 * @Description: In User Settings Edit
 * @FilePath: \css-special-effects\水滴效果.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水滴效果</title>
</head>
<body>
    <div class="water"></div>
</body>
<style>
    body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        /* background-color: rgba(0, 0, 0, 0.9); */
        background-color: rgba(0, 168, 255, 0.8);
    }
    .water{
        width: 200px;
        height: 200px;
        /* background-color: rgba(231, 97, 73, 0.8); */
        /* 水滴的基本结构 */
        border-radius: 31% 69% 57% 43% / 46% 26% 74% 54%;
        /* 内阴影 */
        box-shadow: 
        10px 15px 20px rgba(0, 0, 0, 0.3),
        15px 20px 30px rgba(0, 0, 0, 0.1),
        inset 15px 20px 25px rgba(0, 0, 0, 0.5),
        inset -15px -20px 25px rgba(255, 255, 255, 0.5);
        position: relative;
        /* 调用动画 */
        animation: water-action 10s linear alternate infinite;
    }
    /* 设置光点 */
    .water::after{
        content: '';
        width: 10px;
        height: 10px;
        position: absolute;
        top: 45px;
        left: 60px;
        background-color: rgba(255, 255, 255, 0.8);
        /* 设置阴影 */
        border-radius: 63% 37% 70% 30% / 52% 60% 40% 48%;
        box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 0.8);
    }
    /* 动画-设置圆角的状态 */
    @keyframes water-action{
        25%{
            border-radius: 46% 54% 65% 35% / 32% 44% 56% 68%;
        }
        50%{
            border-radius: 55% 45% 49% 51% / 50% 28% 72% 50%;
        }
        75%{
            border-radius: 42% 58% 39% 61% / 35% 45% 55% 65%;
        }
        100%{
            border-radius: 52% 48% 57% 43% / 56% 48% 52% 44%;
        }
    }
</style>
</html>